<template>    
    <div id="news">    
       我是新闻组件   

        <ul
        v-infinite-scroll="loadMore" 
        infinite-scroll-disabled="loading" 
        infinite-scroll-distance="10" class="list">
            <li v-for="item in list">{{ item.title }}</li>
        </ul>   
        <div>Loading ...</div>
        <!-- <ul v-for="item in list">
            <li>{{item.title}}</li>
        </ul> -->
    </div>

</template>


<script>
// var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
    export default{
        data(){
            return {               
               msg:'我是一个新闻组件'  ,    
               list:[],
               page:1,
               loading:false     // 若为true,则不会触发无限滚动, false会自动滚动且在页面加载时就执行 
            }
        },
        methods:{
            getData(j){
                this.loading=true;  // 防止异步请求未返回时,该方法又调被调用一次
                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page='+this.page;
                // 注意this指向,使用箭头函数就没有指向问题
                this.$http.get(api).then(response=>{
                    console.log(response);
                    this.list=this.list.concat(response.body.result);  // 拼接数组
                    ++this.page;                   
                    if(response.body.result.length<20){ // 当返回数据不足页数时,禁用自动加载更多
                        this.loading=true;
                    }else{
                        this.loading=false;
                    }
                },err=>{
                    console.log(err);
                })
            },
            loadMore() {
                this.getData(this.j);
            }
        },
        mounted(){
            
        }
    }

</script>





<style lang="scss" scoped>
    
    .list{

        li{
            height:3.4rem;

            line-height:3.4rem;

            border-bottom:1px solid #eee;

            font-size:1.6rem;

            a{

                color:#666;

                
            }
        }
    }

</style>